/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <m-list-construction title="创建worker分组">
    <template slot="content">
      <div class="colums">
        <div class="colum">
          <el-table
            ref="multipleTable"
            :data="workerAddressList"
            size="mini"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="60"
              align="center"
            >
            </el-table-column>
            <el-table-column
              type="index"
              label="编号"
              align="center"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="id"
              label="名称/ID"
            >
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column label="IP地址">
              <template slot-scope="scope">
                <span>{{scope.row.ip}}:{{ scope.row.port }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.serverStatus === 0"
                  style="color:green"
                >正常</span>
                <span
                  v-if="scope.row.serverStatus === 1"
                  style="color:red"
                >异常</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="page-box">
            <el-pagination
              background
              @current-change="_page"
              @size-change="_pageSize"
              :page-size="searchParams.pageSize"
              :current-page.sync="searchParams.pageNo"
              :page-sizes="[10, 20, 30]"
              layout="sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
        <div class="colum">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            size="small"
            label-width="100px"
            label-position="right"
          >
            <el-form-item
              label="组名称"
              prop="name"
            >
              <el-input
                v-model="form.name"
                placeholder="请输入组名称"
                style="display: inline-block;width: calc(100% - 150px);"
                :maxlength="12"
              ></el-input>
              <el-button
                type="primary"
                style="width: 120px;"
                @click="_ok"
                :loading="spinnerLoading"
              >创建</el-button>
            </el-form-item>
            <el-form-item
              label="首页展示"
              prop="node"
            >
              <el-switch
                v-model="form.node"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
              <!-- <span class="font999" style="margin-left: 10px;">注：最多支持12个分组统计内容</span> -->
            </el-form-item>
            <el-form-item
              label="中心节点"
              prop="central"
            >
              <el-switch
                v-model="form.central"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
              <span
                class="font999"
                style="margin-left: 10px;"
              >注: 仅支持一个分组为中心节点</span>
            </el-form-item>
            <el-form-item
              label="关联节点"
              prop="connectedList"
            >
              <treeselect
                size="small"
                :options="this.workerGroupList"
                v-model="form.connectedList"
                :multiple="true"
                placeholder="请选择关联节点"
              ></treeselect>
            </el-form-item>
            <el-form-item
              label="worker地址"
              prop="addrList"
            >
              <el-tag
                v-for="item in form.addrList"
                :key="item.ip"
                style="margin-right:5px"
                size="mini"
                closable
                @close="handleClose(item)"
              >{{ item.ip }}:{{ item.port }}</el-tag>
            </el-form-item>
            <el-form-item
              label="权限用户组"
              prop="connectedList"
            >
              <treeselect
                size="small"
                :options="this.workerGroupList"
                v-model="form.connectedList"
                :multiple="true"
                placeholder="请选择用户组"
              ></treeselect>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </m-list-construction>
</template>
<script>
  import mListConstruction from '@/module/components/listConstruction/listConstruction'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { mapActions } from 'vuex'
  import store from '@/conf/home/store'
  export default {
    name: 'resource-list-create-FILE',
    data () {
      return {
        store,
        spinnerLoading: false,
        workerAddressList: [],
        form: {
          addrList: [],
          connectedList: [],
          node: 0,
          central: 0
        },
        searchParams: {
          pageSize: 10,
          pageNo: 1
        },
        total: 0,
        workerGroupList: [],
        rules: {
          name: [{ required: true, message: '请输入组名称' }],
          // node: [{ required: true, message: '' }],
          // central: [{ required: true, message: '' }],
          addrList: [{ required: true, message: '请选择worker地址', trigger: 'change' }]
        }
      }
    },
    props: {},
    methods: {
      ...mapActions('security', ['getWorkerAddresses', 'getWorkerGroups']),
      ...mapActions('scheduler', ['getResourceList']),
      _getList () {
        this.getWorkerGroups({ pageNo: 1, pageSize: 1000 }).then(res => {
          this.workerGroupList = res.totalList.filter(e => e.name !== 'default').map(x => ({ id: x.name, label: x.name }))
        })
      },
      _getWorkerAddressList () {
        // this.getWorkerAddresses().then(res => {
        //   this.workerAddressList = res.data.map(x => ({ id: x, label: x }))
        // })
        this.getResourceList({ pageSize: this.searchParams.pageSize, pageNo: this.searchParams.pageNo }).then(res => {
          this.workerAddressList = res.totalList
          this.total = res.total
        })
      },
      handleSelectionChange (val) {
        this.form.addrList = val
        this.$refs.form.validateField(['addrList'])
      },
      handleClose (tag) {
        console.log(tag)
        // alert(this.multipleSelection[this.multipleSelection.indexOf(tag)])
        let index = this.workerAddressList.findIndex(e => e.ip === tag.ip)
        this.$refs.multipleTable.toggleRowSelection(this.workerAddressList[index])
      },
      _page (val) {
        this.searchParams.pageNo = val
      },
      _pageSize (val) {
        this.searchParams.pageSize = val
      },
      _ok () {
        this.$refs.form.validate(valid => {
          if (valid) {
            let param = {
              id: 0,
              name: this.form.name,
              node: this.form.node,
              central: this.form.central,
              connectedList: this.form.connectedList.join(','),
              addrList: this.form.addrList.map(e => e.ip + ':' + e.port).join(',')
            }
            this.spinnerLoading = true
            this.store.dispatch('security/saveWorkerGroups', param).then(res => {
              this.$message.success(res.msg)
              this.spinnerLoading = false
              this.$router.push('/security/worker-groups/')
            }).catch(e => {
              this.spinnerLoading = false
              this.$message.error(e.msg || '')
            })
          }
        })
      }
    },
    watch: {
      searchParams: {
        deep: true,
        handler: function () {
          this._getWorkerAddressList()
        }
      }
    },
    created () {
      this._getList()
      this._getWorkerAddressList()
    },
    mounted () {
    },
    destroyed () {
    },
    computed: {},
    components: { mListConstruction, Treeselect }
  }
</script>

<style lang="scss" scoped>
/deep/ .colums {
  flex: 1;
  display: flex;
  width: 100%;
  margin: 20px auto;
  .colum {
    flex: 1;
    align-self: stretch;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
  }
  .colum + .colum {
    margin-left: 20px;
  }

  .font999 {
    color: #999999;
  }
}

/deep/.vue-treeselect div,
/deep/.vue-treeselect span {
  line-height: 20px;
}
/deep/.vue-treeselect__placeholder {
  line-height: 32px !important;
}
</style>
